<template>
  <div class="app-container">
    <div id="map" ref="map" style="width:100%;height:900px;" />
    <div class="colors">
      <dl v-for="(item,index) in colors" :key="index" class="flex">
        <dt :style="{background:item.color}">{{ item.value }}</dt>
      </dl>
    </div>
    <div class="tools">
      <el-button @click="showPointDialog">单点计算</el-button>
      <el-button-group style="margin-left:12px;">
        <el-button @click="showDialog">载入文件</el-button>
        <el-button v-if="layerContent" @click="showOrHiddenLayer">{{ show?'隐藏图层':'显示图层' }}</el-button>
      </el-button-group>
      <el-button-group style="margin-left:12px;">
        <el-button :disabled="markers.length > 0" type="default" icon="el-icon-plus" @click="selectSensor">选择传感器埋设位置</el-button>
        <el-button :disabled="markers.length === 0" type="default" icon="el-icon-refresh-right" @click="reSelectSensor">清空已选位置</el-button>
        <el-button :disabled="markers.length === 0" type="default" icon="el-icon-download" @click="exportSensorPoints">导出位置点</el-button>
      </el-button-group>
    </div>
    <awc ref="awc" @addLayer="addToMap" />
    <point ref="point" />
  </div>
</template>

<script>

import Awc from './components/awc'
import Point from './components/point'
import * as turf from '@turf/turf'
import { mapGetters } from 'vuex'
import { colors } from '@/utils/constant'
import { marker, icon, latLng } from 'leaflet'
import { exportExcel } from '@/api/util'
import mapConfig from '@/config/map'
import { save } from '@/api/statistics'
export default {
  components: {
    Awc,
    Point
  },
  data() {
    return {
      map: {},
      urls: mapConfig.mapTypes[mapConfig.initType],
      awcLayer: null,
      layerContent: null,
      show: false,
      colors,
      markers: [],
      downloadLoading: false,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx'
    }
  },
  computed: {
    ...mapGetters(['project']),
    circlePolygon() {
      const center = [this.project.lng, this.project.lat]
      const radius = 0.1499
      const options = { steps: 100, units: 'kilometers', properties: { foo: 'bar' }}
      return turf.circle(center, radius, options)
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    async save(info) {
      const { msg } = await save('awc', info)
      this.$message.success(msg)
    },
    showPointDialog() {
      this.$refs.point.show()
    },
    showDialog() {
      this.$refs.awc.show()
    },
    initMap() {
      // eslint-disable-next-line no-undef
      var baseLayer = L.tileLayer(
        this.urls[0], {
          attribution: '...',
          maxZoom: 18
        })

      // eslint-disable-next-line no-undef
      const map = L.map('map', {
        center: [37.467294, 114.913504],
        zoom: 18,
        zoomControl: false,
        maxZoom: 18,
        attributionControl: false,
        layers: [baseLayer]
      })
      this.map = map
    },
    addToMap(res, data) {
      console.log(res)
      this.layerContent = res
      this.addLayer()
      this.save({ data: {
        key: 'awc',
        data
      }})
    },
    addLayer() {
      this.show = true
      this.awcLayer = this.layerContent.addTo(this.map)
    },
    removeLayer() {
      this.show = false
      this.map.removeLayer(this.awcLayer)
    },
    showOrHiddenLayer() {
      if (this.show) {
        this.removeLayer()
      } else {
        this.addLayer()
      }
    },
    selectSensor() {
      this.addMarker(latLng({ lat: this.project.lat, lng: this.project.lng }))
      this.map.on('click', (event) => {
        this.addMarker(event.latlng)
      })
    },
    addMarker(location) {
      this.location = {
        lng: location.lng,
        lat: location.lat
      }
      const text = '当前位置: [' + location.lng.toPrecision(9) + '，' + location.lat.toPrecision(9) + ']'
      this.tag = text
      const myIcon = icon({
        iconUrl: require('@/icons/device/marker.png'),
        iconSize: [25, 41],
        iconAnchor: [12, 41]
      })
      const point = marker({ lat: location.lat, lng: location.lng }, { icon: myIcon }).addTo(this.map)
      point.on('click', (e) => {
        const currentIndex = this.markers.findIndex((val) => {
          return val === e.target
        })
        this.map.removeLayer(this.markers[currentIndex])
        this.markers.splice(currentIndex, 1)
      })
      this.markers.push(point)
    },
    reSelectSensor() {
      this.markers.forEach((val) => {
        this.map.removeLayer(val)
      })
      this.markers = []
    },
    exportSensorPoints() {
      const data = this.markers.map((val) => {
        const latlng = val._latlng
        return { lat: latlng.lat, lng: latlng.lng }
      })
      exportExcel(data).then((res) => {
        if (res.errorCode === 0) {
          window.location.href = 'http://59.110.156.253:9081/idata/util/export'
        } else {
          this.$message.error('导出失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  position:relative;
  .tools{
    position:absolute;
    top:24px;
    right:24px;
    z-index:999;
  }
}
.colors{
  position:absolute;
  top:24px;
  left:24px;
  z-index:999;
  dl{
    align-items:center;
    font-size:12px;
    dt{
      display:inline-block;
      width:60px;
      height:30px;
      line-height:30px;
      text-align:center;
      margin-right:4px;
      color:#333;
    }
  }
}
</style>
